<!-- 安全告警周报 -->

<template>
  <div class="flex flex-col w-full p-10px box-border" style="height: calc(100% - 40px)">
    <!-- card -->
    <div
      class="flex-1 flex flex-col h-100%"
      style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)"
    >
      <div class="h-50px lh-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">安全告警周报</span>
      </div>
      <div class="w-full" style="height: calc(100% - 50px)">
        <!--查询表单 -->
        <el-form
          :inline="true"
          :model="formInline"
          class="m-20px pl-30px pr-30px border-0 border-b border-solid border-#E0E0E0"
        >
          <el-form-item label="选择时间范围">
            <el-date-picker
              v-model="formInline.region"
              type="daterange"
              range-separator="至"
              unlink-panels
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>

          <div class="mt-2px float-right">
            <!-- <el-button class="w-80px text-[#fff] bg-[#0099ff] rounded-15px">查询</el-button>
            <el-button class="w-80px bg-[#dceeff] rounded-15px">重置</el-button> -->

            <el-button type="primary" class="w-80px rounded-15px" :icon="Search">查询</el-button>
            <el-button class="w-80px bg-[#dceeff] rounded-15px" :icon="Refresh">重置</el-button>
          </div>
        </el-form>

        <!--表格 -->
        <Table
          class="mt-20px"
          style="height: calc(100% - 170px)"
          :table-columns="tableColumns"
          :table-data="tableData"
        >
          <template #actionColumn="{ row }">
            <div class="flex justify-center">
              <el-button link type="primary" @click="dialogShow = true">在线预览</el-button>
              <el-button link type="primary" @click="generatePDF">下载</el-button>
            </div>
          </template>
        </Table>

        <el-pagination
          class="justify-end m-10px mt-15px"
          layout="total, sizes, prev, pager, next"
          :total="tableData.length"
          background
        >
        </el-pagination>
      </div>
    </div>
  </div>

  <Dialog :visible="dialogShow" title="安全告警周报" width="1000px" @close="dialogShow = false">
    <div id="dom">
      <div id="btn" class="text-right">
        <el-button
          type="primary"
          class="w-80px ml-50px rounded-15px"
          :icon="Download"
          @click="generatePDF"
          >导出</el-button
        >
      </div>

      <h1 class="text-center">徐圩新区能源告警周报</h1>
      <h3 class="text-center">2023年02月13日-2023年02月19日</h3>

      <div>
        <span class="inline-block text-20px font-bold text-[#409eff] ml-20px mb-10px"
          >一、总体情况</span
        >
        <Table
          style="margin: 0; margin-left: 20px"
          :table-columns="tableColumns1"
          :table-data="tableData1"
        >
        </Table>
      </div>

      <div>
        <span class="inline-block text-20px font-bold text-[#409eff] mt-30px ml-20px mb-10px"
          >二、告警排行</span
        >
        <div>
          <div>
            <span class="inline-block text-16px font-bold text-[#409eff] mt-10px ml-20px mb-10px"
              >(一) 告警TOP5企业</span
            >
            <Table
              style="height: 280px; margin: 0; margin-left: 20px"
              :table-columns="tableColumns2"
              :table-data="tableData2"
            >
            </Table>
          </div>
          <div>
            <span class="inline-block text-16px font-bold text-[#409eff] mt-10px ml-20px mb-10px"
              >(二) 蒸汽告警TOP5企业</span
            >
            <Table
              style="height: 280px; margin: 0; margin-left: 20px"
              :table-columns="tableColumns2"
              :table-data="tableData2"
            >
            </Table>
          </div>
          <div>
            <span class="inline-block text-16px font-bold text-[#409eff] mt-10px ml-20px mb-10px"
              >(三) 电务告警TOP5企业</span
            >
            <Table
              style="height: 280px; margin: 0; margin-left: 20px"
              :table-columns="tableColumns2"
              :table-data="tableData2"
            >
            </Table>
          </div>
          <div>
            <span class="inline-block text-16px font-bold text-[#409eff] mt-10px ml-20px mb-10px"
              >(四) 水务告警TOP5企业</span
            >
            <Table
              style="height: 280px; margin: 0; margin-left: 20px"
              :table-columns="tableColumns2"
              :table-data="tableData2"
            >
            </Table>
          </div>
          <div>
            <span class="inline-block text-16px font-bold text-[#409eff] mt-10px ml-20px mb-10px"
              >(五) 燃气告警TOP5企业</span
            >
            <Table
              style="height: 280px; margin: 0; margin-left: 20px"
              :table-columns="tableColumns2"
              :table-data="tableData2"
            >
            </Table>
          </div>
        </div>
      </div>
    </div>
  </Dialog>
</template>
<script lang="ts" setup>
import html2canvas from 'html2canvas'
import { Search, Refresh, Download } from '@element-plus/icons-vue'
import jsPDF from 'jspdf'
import { ElMessage } from 'element-plus'

const generatePDF = () => {
  nextTick(async () => {
    document.getElementById('btn').style.display = 'none'
    const dom: any = document.getElementById('dom')

    // 创建一个新的 jsPDF 对象，页面宽度为 210 毫米，高度按照 DOM 元素的长宽比例计算
    const pdf = new jsPDF('p', 'mm', [dom.offsetWidth, dom.offsetHeight])

    // 将 DOM 元素转换为 Canvas
    const canvas = await html2canvas(dom)
    document.getElementById('btn').style.display = 'block'

    // 将 Canvas 转换为图像数据，并将图像添加到 PDF 中
    const imgData = canvas.toDataURL('image/png')
    pdf.addImage(imgData, 'PNG', 0, 0, dom.offsetWidth, dom.offsetHeight)

    // 保存 PDF 文件
    pdf.save('徐圩新区能源告警周报.pdf')

    ElMessage.success('导出成功')
  })
}

const formInline = reactive({
  user: '',
  region: '',
})

// 定义列配置
const tableColumns = [
  {
    prop: 'id',
    label: '序号',
    width: '80',
  },
  {
    prop: 'zbmc',
    label: '周报名称',
    align: 'center',
  },
  {
    prop: 'zbscsj',
    label: '周报生成时间',
    align: 'center',
  },
  {
    prop: 'actions',
    label: '操作',
    width: '200',
    slotName: 'actionColumn',
    type: 'slot',
    align: 'center',
  },
]

const tableData = [
  {
    id: 1,
    zbmc: '徐圩新区能源告警周报 20230213-20230219',
    zbscsj: '2023-02-20 00:01',
  },
  {
    id: 2,
    zbmc: '徐圩新区能源告警周报 20230213-20230219',
    zbscsj: '2023-02-20 00:01',
  },
  {
    id: 3,
    zbmc: '徐圩新区能源告警周报 20230213-20230219',
    zbscsj: '2023-02-20 00:01',
  },
  {
    id: 4,
    zbmc: '徐圩新区能源告警周报 20230213-20230219',
    zbscsj: '2023-02-20 00:01',
  },
  {
    id: 5,
    zbmc: '徐圩新区能源告警周报 20230213-20230219',
    zbscsj: '2023-02-20 00:01',
  },
  {
    id: 6,
    zbmc: '徐圩新区能源告警周报 20230213-20230219',
    zbscsj: '2023-02-20 00:01',
  },
  {
    id: 7,
    zbmc: '徐圩新区能源告警周报 20230213-20230219',
    zbscsj: '2023-02-20 00:01',
  },
  {
    id: 8,
    zbmc: '徐圩新区能源告警周报 20230213-20230219',
    zbscsj: '2023-02-20 00:01',
  },
  {
    id: 9,
    zbmc: '徐圩新区能源告警周报 20230213-20230219',
    zbscsj: '2023-02-20 00:01',
  },
  {
    id: 10,
    zbmc: '徐圩新区能源告警周报 20230213-20230219',
    zbscsj: '2023-02-20 00:01',
  },
]

const dialogShow = ref(false)

const tableColumns1 = [
  {
    prop: 'gjzs',
    label: '告警总数',
    align: 'center',
  },
  {
    prop: 'swgjzs',
    label: '水务告警总数',
    align: 'center',
  },
  {
    prop: 'dwgjzs',
    label: '电务告警总数',
    align: 'center',
  },
  {
    prop: 'rqgjzs',
    label: '燃气告警总数',
    align: 'center',
  },
  {
    prop: 'zqgjzs',
    label: '蒸汽告警总数',
    align: 'center',
  },
  {
    prop: 'yjgjzs',
    label: '一级告警总数',
    align: 'center',
  },
  {
    prop: 'ejgjzs',
    label: '二级告警总数',
    align: 'center',
  },
  {
    prop: 'sjgjzs',
    label: '三级告警总数',
    align: 'center',
  },
]
const tableData1 = [
  {
    gjzs: 356,
    swgjzs: 89,
    dwgjzs: 89,
    rqgjzs: 89,
    zqgjzs: 89,
    yjgjzs: 119,
    ejgjzs: 119,
    sjgjzs: 118,
  },
]

const tableColumns2 = [
  {
    prop: 'pm',
    label: '排名',
    width: '80',
    align: 'center',
  },
  {
    prop: 'qymc',
    label: '企业名称',
    align: 'center',
  },
  {
    prop: 'gjzcs',
    label: '告警总次数',
    width: '200',
    align: 'center',
  },
]
const tableData2 = [
  {
    pm: 1,
    qymc: '盛虹炼化（连云港）有限公司',
    gjzcs: 105,
  },
  {
    pm: 2,
    qymc: '江苏斯尔邦石化有限公司',
    gjzcs: 89,
  },
  {
    pm: 3,
    qymc: '江苏瑞恒新材料科技有限公司',
    gjzcs: 76,
  },
  {
    pm: 4,
    qymc: '江苏嘉宏新材料有限公司',
    gjzcs: 54,
  },
  {
    pm: 5,
    qymc: '江苏鹏辰特种新材料有限公司',
    gjzcs: 24,
  },
]
</script>

<style>
hr {
  margin-bottom: 18px;
  border: 0;
  border-bottom: 1px solid #ededed;
}
</style>
